<template>
  <div>
    <el-dialog :visible.sync="franchiseeDialog" :title="title+'加盟商'" width="40%" center top="50px">
      <el-form
          :model="franchiseeInfo"
          :rules="rules"
          ref="supplierForm"
          label-width="0"
      >
        <el-form-item prop="franchiseeName">
          <div style="display: flex">
            <p style="width:100px;text-align: right;font-weight: bold">加盟商姓名：</p>
            <el-input size="small" clearable v-model="franchiseeInfo.franchiseeName" placeholder="请输入">
            </el-input>
          </div>
        </el-form-item>
        <el-form-item prop="franchiseePhone">
          <div style="display: flex">
            <p style="width:100px;text-align: right;font-weight: bold">加盟商电话：</p>
            <el-input size="small" clearable v-model="franchiseeInfo.franchiseePhone" placeholder="请输入">
            </el-input>
          </div>
        </el-form-item>
        <el-form-item prop="gender">
          <div style="display: flex">
            <p style="width:100px;text-align: right;font-weight: bold">性别：</p>
            <el-select v-model="franchiseeInfo.gender" clearable filterable size="small" style="width: 100%">
              <el-option value="0" label="男"></el-option>
              <el-option value="1" label="女"></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="display: flex">
            <p style="width:100px;text-align: right;font-weight: bold">证件：</p>
            <div style="width:100%;display: flex;">
              <span>身份证正面：
              <el-upload
                  class="avatar-uploader"
                  :headers="headers"
                  :action="`${$apiHost}/img/fileImgUrl`"
                  :show-file-list="false"
                  :on-success="handleChangeFont">
              <img v-if="frontImg" :src="'https://'+frontImg" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload></span>
              <span style="margin-left: 100px">身份证反面：
              <el-upload
                  class="avatar-uploader"
                  :headers="headers"
                  :action="`${$apiHost}/img/fileImgUrl`"
                  :show-file-list="false"
                  :on-success="handleChangeBack">
              <img v-if="backImg" :src="'https://'+backImg" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload></span>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="display: flex;margin-top: 20px">
            <p style="width:100px;text-align: right;font-weight: bold">合作协议：</p>
            <upload-excel
                v-if="franchiseeDialog"
                style="margin-top: 10px"
                :type="'合同'"
                @addStatus="handleUploadSuccess"
            />
          </div>
          <el-link v-if="title=='编辑'&&type==0" style="font-size: 12px">{{ 'https://' + contractUrl }}</el-link>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="small" @click="franchiseeDialog=false">取 消</el-button>
        <el-button size="small" style="background-color:#303e9d;color: #F3F6FD" @click="_comfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import rayUpload from "../../../../RayComponents/rayUpload.vue";
import uploadExcel from "../uploadExcel.vue";

export default {
  name: "addEditDialog",
  components: {
    rayUpload,
    uploadExcel
  },
  data() {
    return {
      franchiseeDialog: false,
      edtiId: "",
      franchiseeInfo: {
        franchiseeName: "",
        franchiseePhone: "",
        gender: "",
      },
      type: 0,
      show: true,
      title: "",
      rules: {
        franchiseeName: [
          {required: true, message: '请输入加盟商姓名', trigger: 'blur'},
          {min: 2, max: 5, message: '长度在 2到 5 个字符', trigger: 'blur'}
        ],
        franchiseePhone: [
          {required: true, message: "请输入加盟商电话", trigger: 'blur'}
        ]
      },
      frontImg: "",
      backImg: "",
      contractUrl: ""
    }
  },
  computed: {
    headers() {
      const token = window.$quinn.getStorage("tokenv3")
      return {
        token,
      };
    }
  },
  methods: {
    handleOpen(val) {
      if (val == 'add') {
        this.title = '新增'
        this.franchiseeInfo = this.$options.data.call(this).franchiseeInfo
        this.backImg = ''
        this.frontImg = ''
        this.contractUrl = ''
      } else {
        this.title = '编辑'
        Object.keys(this.franchiseeInfo).forEach(key => {
          if (val.hasOwnProperty(key)) {
            this.franchiseeInfo[key] = val[key]
          }
        })
        this.edtiId = val.id
        //type  编辑的时候回显合同url
        this.type = 0
        this.backImg = val.cardFront
        this.frontImg = val.cardReverse
        this.contractUrl = val.agreementUrl
      }
      this.franchiseeDialog = true
    },
    handleChangeFont(res, fileList) {
      this.frontImg = res.result[0];
    },
    handleChangeBack(res, fileList) {
      this.backImg = res.result[0];
    },
    handleUploadSuccess(val) {
      // type 默认0 回显合同url  重新上传合同 type发生改变 不再回显合同url
      this.type = val.type
      this.contractUrl = val.file;
    },
    //保存加盟商信息  新增、编辑
    async _comfirm() {
      const phoneReg = /^1[3-9]\d{9}$/;
      const checks = [
        {value: this.franchiseeInfo.franchiseeName, msg: '加盟商姓名必填！'},
        {value: this.franchiseeInfo.franchiseePhone, msg: '加盟商联系方式必填！'},
        {value: this.frontImg, msg: '必须上传身份证人像页！'},
        {value: this.backImg, msg: '必须上传身份证国徽页！'},
        {value: this.contractUrl, msg: '必须上传合作协议！'},
      ]
      for (const {value, msg} of checks) {
        if (!value) return this.$message.warning(msg)
      }
      if (!phoneReg.test(this.franchiseeInfo.franchiseePhone)) {
        return this.$message.warning('请输入正确的11位手机号！');
      }
      const data = {
        ...this.franchiseeInfo,
        agreementUrl: this.contractUrl,
        cardFront: this.frontImg,
        cardReverse: this.backImg
      }
      if (this.title == '编辑') data.id = this.edtiId
      try {
        const apiMap = {
          '新增': this.$api.franchiseeAdd,
          '编辑': this.$api.franchiseeUpdate
        };
        const apiFunc = apiMap[this.title];
        if (!apiFunc) return;
        const resDate = await apiFunc(data);
        if (resDate == 1) {
          this.$message.success(`${this.title}成功！`)
          this.$emit('addStatus', 1);
          this.franchiseeDialog = false
        }
      } catch (err) {
        console.error('接口请求出错：', err);
        this.$message.error('操作失败，请稍后重试');
      }
    }
  }
}
</script>

<style scoped lang="less">
::v-deep .el-input__inner {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/deep/ .el-dialog__title {
  color: #fff;
}

/deep/ .el-dialog {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/deep/ .el-dialog__header {
  background-color: #303e9d;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  /*border-top-left-radius: 20 px;*/
  /*/ / border-top-right-radius: 20 px;*/
}

.avatar-uploader {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  margin-left: 15px;
  line-height: 50px;
  text-align: center;
}

.avatar {
  width: 150px;
  height: 100px;
  display: block;
}

</style>